<template>
    <div class="dashboard-container print-area" id="printArea" >
        <el-row style="margin-bottom: 10px; margin-top: 10px">
          <el-col :lg="24">
            <div style="text-align: center; font-size: 1.2rem;">{{setting.sampleName}}  {{$t("lab.labTitle")}} </div>
            <div style="text-align: right; font-size: 0.8rem">{{$t("print.time") }} {{currentTime}} </div>
          </el-col>
        </el-row>
      <el-tabs  v-model="activeName" :stretch="true">
        <el-tab-pane :label="$t('lab.first')" name="first">
          <el-row :gutter="5" style="margin: 2px">
            <el-card shadow="always">
              <div slot="header" class="clearfix">
                <span> {{$t("lab.setting")}}</span>
                <el-button style="float: right; padding: 0px 0; margin-right: 10px" type="text" icon="el-icon-download" @click="readSetting" class="printHide">{{$t("lab.syncSetting")}}</el-button>
                <!--                        <el-button style="float: right; padding: 3px 0; margin-right: 10px" type="text" icon="el-icon-search" @click="findModel">{{$t("lab.findModel")}}</el-button>-->
              </div>
              <div>
                <el-form ref="setting" label-width="auto" :model="setting" :rules="settingRules">
                  <el-col :span="12"  class="settingPrintItem">
                    <el-form-item :label="$t('lab.sampleName')" prop="sampleName">
                      <el-input v-model="setting.sampleName" clearable style="width: 100%"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" >
                    <el-form-item :label="$t('lab.model')" prop="model">
                      <el-select v-model="setting.model" filterable clearable :placeholder="$t('lab.modelTip')" @change="handleModelSelection" style="width: 100%" disabled>
                        <el-option v-for="item in setting.modelOptions" :key="item" :label="item" :value="item"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" >
                    <el-form-item :label="$t('lab.timeGap')"  prop="timeTip">
                      <el-input v-model="setting.timeGap" clearable type="number" style="width: 100%">
                        <template slot="append">S</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" >
                    <el-form-item :label="$t('lab.measureTime')" prop="measureTime">
                      <el-input v-model="setting.measureTime" clearable type="number" style="width: 100%">
                        <template slot="append">M</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" >
                    <el-form-item :label="$t('lab.spindle')" prop="spindle">
                      <el-select v-model="setting.spindle" filterable clearable :placeholder="$t('lab.spindleTip')" style="width: 100%">
                        <el-option v-for="item in setting.spindleOptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" >
                    <el-form-item :label="$t('lab.rpm')" prop="rpm">
                                 <span slot="label">
                                    <span class="span-box">
                                        <span>{{$t('lab.rpm')}}</span>
                                        <el-tooltip style="display: inline" effect="dark" :content="speedContent">
                                            <i class="el-icon-question"></i>
                                        </el-tooltip>
                                    </span>
                                </span>
                      <span v-if="setting.showSpeedSelective">
                                  <el-select v-model="setting.rpm" filterable clearable style="width: 100%">
                                    <el-option v-for="item in setting.speedOptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
                                  </el-select>
                                </span>
                      <span v-else>
                                  <el-input-number v-model="setting.rpm" clearable style="width: 100%"  :precision="1" :min="setting.speedMin" :max="setting.speedMax"></el-input-number>
                                </span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12"  >
                    <el-form-item :label="$t('lab.operator')"  prop="operator">
                      <el-input v-model="setting.operator" clearable>  style="width: 100%"</el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12"  >
                    <el-form-item :label="$t('lab.density')"  prop="density">
                      <el-input-number v-model="setting.density" clearable style="width: 100%" :step="0.1" :precision="3" :min="0.001"></el-input-number>
                    </el-form-item>
                  </el-col>
                  <!--                            <el-col :span="24"  class="printHide">-->
                  <!--                                <el-form-item   prop="operator">-->
                  <!--                                    <el-button style="width: 100%" type="primary" @click="sendSettingData" id="no-print-send-setting">{{$t("lab.sendop")}}</el-button>-->
                  <!--                                    <el-button style="width: 100%" type="primary" @click="clientWidth" id="no-print-send-setting">宽度和高度</el-button>-->
                  <!--                                </el-form-item>-->
                  <!--                            </el-col>-->
                </el-form>
              </div>
            </el-card>
          </el-row>
          <el-row>
              <el-progress :stroke-width="10" v-show = "percentage !== 0" define-back-color="#003350" :percentage="percentage" color="#FF006E" :show-text="false"></el-progress>
              <el-row :gutter="20" justify="center" type="flex">
                <el-col :span="6">
                  <el-button
                      class="sci-button sci-stop"
                      @click="stopOp"
                      icon="el-icon-switch-button"
                  >
                    <span class="neon-text">停止</span>
                  </el-button>
                </el-col>

                <el-col :span="12">
                  <el-button
                      class="sci-button sci-start"
                      icon="el-icon-caret-right"
                      @click="startOp"
                  >
                    <span class="pulse-text">启动</span>
                    <div class="button-glow"></div>
                  </el-button>
                </el-col>

                <el-col :span="6">
                  <el-button
                      class="sci-button sci-save"
                      icon="el-icon-download"
                      @click="saveOp"
                  >
                    <transition name="fade">
                      <span class="glowing-text">保存</span>
                    </transition>
                  </el-button>
                </el-col>
              </el-row>
              <el-progress v-show="percentage !== 0" :stroke-width="10"	define-back-color="#003350" :percentage="percentage" color="#FF006E" :show-text="false"></el-progress>
          </el-row>
          <el-row>
            <el-col :span="24" style="margin-top: 5px">
              <el-card shadow="always">
                <div slot="header" class="clearfix">
                  <span> {{$t("lab.receiving")}}</span>
                </div>
                <div>
                  <el-form ref="form" :model="receiving" label-width="auto">
                    <el-col :span="12">
                      <el-form-item :label="$t('lab.naindu')" >
                        {{niandu}}
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item :label="$t('lab.yunDongNianDu')" >
                        {{yunDongNianDu}}
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" >
                      <el-form-item :label="$t('lab.temperture')" >
                        {{temperture}}
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" >
                      <el-form-item :label="$t('lab.spindle')">
                        {{setting.spindle | spindleFormatter}}
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" >
                      <el-form-item :label="$t('lab.rpm')">
                        {{setting.rpm}}
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" >
                      <el-form-item :label="$t('lab.ratio')">
                        {{ratio}}
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" >
                      <el-form-item :label="$t('lab.ss')">
                        {{ss}}
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" >
                      <el-form-item :label="$t('lab.sr')">
                        {{sr}}
                      </el-form-item>
                    </el-col>
                    <el-col :span="12"  v-if="showSuperAdmin">
                      <el-form-item :label="$t('lab.m1')">
                        {{m1}}
                      </el-form-item>
                    </el-col>
                    <el-col :span="12"  v-if="showSuperAdmin">
                      <el-form-item :label="$t('lab.m2')">
                        {{m2}}
                      </el-form-item>
                    </el-col>
                    <el-col :span="12"  v-if="showSuperAdmin">
                      <el-form-item :label="$t('lab.m3')">
                        {{m3}}
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" >
                      <el-form-item :label="$t('lab.lastTime')">
                        {{timeLeft}}
                      </el-form-item>
                    </el-col>
                  </el-form>
                </div>

                <div slot="footer" class="clearfix">
                  <span> {{$t("lab.receiving")}}</span>
                </div>
              </el-card>

            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane :label="$t('lab.second')" name="second">
          <el-row>
            <el-col :span="24">
              <el-card shadow="always">
<!--                <div slot="header" class="clearfix">-->
<!--                  <span> {{$t("lab.pic")}}</span>-->
<!--                </div>-->
                <div>
                  <highcharts :options="chartOptions" ref="chart"></highcharts>
                </div>

                <div class="printHide">
                  <el-row class="row-padding">
                    <el-button type="primary" @click="exportExcel">{{$t('chart.downLoad')}}</el-button>
                  </el-row>

                  <el-table
                      :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                      style="width: 100%; margin-top: 10px; height: 280px"
                      id="out-table"
                  >
                    <el-table-column :label="$t('chart.xAxis')" :formatter="timeFormatter">
                    </el-table-column>
                    <el-table-column :label="$t('chart.serialName1')" align="center">
                      <template slot-scope="scope">
                        <span>{{ scope.row.niandu }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column :label="$t('chart.serialName2')" align="center">
                      <template slot-scope="scope">
                        {{ scope.row.temperture }}
                      </template>
                    </el-table-column>
                    <el-table-column :label="$t('chart.serialName3')" align="center" >
                      <template slot-scope="scope">
                        {{ scope.row.ratio }}
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-pagination  align='center'
                                  @size-change="handleSizeChange"
                                  @current-change="handleCurrentChange"
                                  :current-page="currentPage"
                                  :page-sizes="[10,20,50]"
                                  :page-size="pageSize"
                                  layout="total, sizes, prev, pager, next, jumper"
                                  :total="tableData.length">
                  </el-pagination>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>

    </div>
</template>
<script>
    import { addMeasureData } from '../../../api/measuredata'
    import { getSerialDevice } from '../../../api/searialDevice'
    import {isEmptyString, toSendValue} from "../../../utils/protocol";
    import { Message } from 'element-ui'
    import {formatMMSS, delay, spindleFormatter, isSpeedSelective, getSpeedOptions} from "../../../utils/util";
    import {getModel} from "../../../api/model";
    import FileSaver from 'file-saver'
    import * as XLSX from 'xlsx'
    import dayjs from "dayjs"
    import axios from "axios";

    export default {
        data() {
            return {
                percentage : 0,
                activeName: "first",
                setting: {
                    model:"",
                    modelOptions: this.$i18n.tc("lab.modelOptions"),
                    sampleName: '',
                    spindle: "",
                    spindleOptions:[],
                    speedOptions:[],
                    showSpeedSelective: false,
                    rpm: "",
                    timeGap: "",
                    measureTime:"",
                    operator:"",
                    speedMin: 0.1,
                    speedMax: 120,
                    density: 1

                },
                settingRules:{
                    model: [
                        { required: true, message: this.$i18n.tc("lab.modelTip"), trigger: 'change' },
                    ],

                    sampleName: [
                        { required: true, message: this.$i18n.tc("lab.sampleNameTip"), trigger: 'blur' },
                    ],
                    spindle: [
                        { required: true, message: this.$i18n.tc("lab.spindleTip"), trigger: 'change' },
                    ],
                    rpm: [
                        { required: true, message: this.$i18n.tc("lab.rpmTip"), trigger: 'blur' },
                    ],
                    timeGap: [
                        {required: true, message: this.$i18n.tc("lab.timeGapTip"), trigger: 'blur' },
                    ],
                    measureTime: [
                        { required: true, message: this.$i18n.tc("lab.measureTimeTip"), trigger: 'blur' },
                    ],
                    operator: [
                        { required: true, message: this.$i18n.tc("lab.operatorTip"), trigger: 'blur' },
                    ],
                },
                receiving:{},
                chartOptions: {
                    chart: {
                      backgroundColor: 'rgba(255, 255, 255, 0.9)',
                    },
                    zoomType: 'x',
                    title: {
                        text: this.$i18n.tc("chart.title")
                    },
                    yAxis: {
                        title: {
                            text: this.$i18n.tc("chart.yAxis")
                        }
                    },
                    xAxis: {
                        title: {
                            text: this.$i18n.tc("chart.xAxis")
                        },
                        labels:{
                            formatter : function(){
                                return formatMMSS(this.value);
                            }
                        }
                    },
                    credits:{
                        enabled: false
                    },
                    tooltip: {
                        shared: true,
                        useHTML: true,
                        headerFormat:"",
                        pointFormatter: function () {
                            return formatMMSS(this.x) +  '<br/><span style="color: '+ this.series.color + '">\u25CF</span> '+
                                this.series.name+   ': <b>'+ this.y +'</b><br/>'
                        },
                    },
                    series: this.$store.state.bSerialPort.series,
                    responsive: {
                        rules: [
                            {
                                condition: {
                                    maxWidth: 500
                                },
                                credits:{
                                    enabled: false
                                }
                            }
                        ]
                    },
                    exporting: {
                      buttons: {
                        contextButton: {
                          menuItems: ['viewFullscreen']
                        }
                      }
                   }
                },
                tableData:[],
                currentPage: 1,
                total: 0,
                pageSize: 10,
                exportHeaderShow: false,
                currentTime: dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss'),
                timer: null,
                ip: null,
                uuid: null,
                running: false
            }
        },
        computed:{
            showSuperAdmin() {
                console.info("roles is " + this.$store.state.user.roles);
                return this.$store.state.user.roles == "SUPPERADMIN";
            },
            niandu () {
                return this.$store.state.bSerialPort.niandu;
            },
            yunDongNianDu() {
              if (this.setting.density > 0 && this.$store.state.bSerialPort.niandu > 0) {
                return this.$store.state.bSerialPort.niandu / this.setting.density;
              }
              return "";
            },
            temperture() {
                return this.$store.state.bSerialPort.temperture;
            },
            ratio () {
                return this.$store.state.bSerialPort.ratio;
            },
            ss() {
                return this.$store.state.bSerialPort.ss;
            },
            sr() {
                return this.$store.state.bSerialPort.sr;
            },
            m1() {
                return this.$store.state.bSerialPort.m1;
            },
            m2() {
                return this.$store.state.bSerialPort.m2;
            },
            m3() {
                return this.$store.state.bSerialPort.m3;
            },
            timeLeft() {
                let value = this.$store.state.bSerialPort.timeLeft;
                return formatMMSS(value);
            },
            speedContent() {
                return this.setting.speedMin + this.$i18n.tc("lab.speedContentDivider") + this.setting.speedMax;
            }

        },
        watch: {
            "$store.state.bSerialPort.series":{
                deep:true,
                handler:function(newVal){
                   this.chartOptions.series = newVal;
                }
            },
            "$store.state.bSerialPort.tableRow":{
                handler:function(newVal){
                    console.log("nveValue" + JSON.stringify(newVal))
                    this.tableData.unshift(newVal)
                }
            },
          "$store.state.bSerialPort.status":{
            handler:function(newVal){
              console.info("newVal" + newVal);
              if (newVal) {
                this.tableData = [];
                this.currentPage = 1;
              }
            }
          },
          "$store.state.bSerialPort.settingModel":{
              deep:true,
              handler:function(newVal){
                  if (isEmptyString(newVal)) {
                      return;
                  }
                  this.setting.model = newVal;
                  const key = 'lab.spindleOptions.' + newVal;
                  this.setting.spindleOptions = this.$i18n.tc(key);
                  const speedScopeKey = 'lab.speedOptions.' + newVal;
                  const speedScope =  this.$i18n.tc(speedScopeKey);
                  console.info(speedScope);
                  this.setting.speedMin = speedScope[0];
                  this.setting.speedMax = speedScope[1];
                  if (isSpeedSelective(newVal)) {
                    this.setting.showSpeedSelective = true;
                    this.setting.speedOptions = getSpeedOptions(newVal);
                    this.setting.rpm = this.setting.speedOptions[0]["value"];
                  } else {
                     this.setting.showSpeedSelective = false;
                  }

              }
          },
          "$store.state.bSerialPort.settingSpider":{
              deep:true,
              handler:function(newVal){
                  this.setting.spindle = newVal;
              }
          },
          "$store.state.bSerialPort.settingSpeed":{
              deep:true,
              handler:function(newVal){
                  this.setting.rpm = newVal;
              }
          },
          "$store.state.bSerialPort.settingTimeGap":{
              deep:true,
              handler:function(newVal){
                  this.setting.timeGap = newVal;
              }
          },
          "$store.state.bSerialPort.settingTime":{
              deep:true,
              handler:function(newVal){
                  this.setting.measureTime = newVal;
              }
          },
          "$store.state.bSerialPort.uuid": {
            deep:true,
            handler:function(newVal){
              this.uuid = newVal;
            }
          },
          "uuid": {
            deep:true,
            handler:function(newVal){
               console.info("uuid " + newVal);
               this.reportData();
            }
          },
          "ip": {
            deep:true,
            handler:function(newVal){
              console.info("ip " + newVal);
              this.reportData();
            }
          },
          "setting.model" : {
            deep:true,
            handler:function(newVal){
              console.info("model " + newVal);
              this.reportData();
            }
          }

        },
        filters:{
            spindleFormatter(value) {
                return spindleFormatter(value)
            }
        },
        unmounted() {
            console.info("LabIndex unmounted" );
        },
        created() {
            console.info("LabIndex created" );
            this.asyncInit();
            this.asyncIp();
            const latestKey = this.$store.state.user.name;
            const key = localStorage.getItem(latestKey);
            if (!isEmptyString(key)) {
                let valueStr = localStorage.getItem(key);
                if (!isEmptyString(valueStr)) {
                    let value = JSON.parse(valueStr);
                    this.setting.model = value.model;
                    this.setting.sampleName = value.sampleName;
                    this.setting.spindle = value.spindle;
                    this.setting.rpm = value.rpm;
                    this.setting.timeGap = value.timeGap;
                    this.setting.measureTime = value.measureTime;
                    this.setting.operator = value.operator;
                    this.setting.speedMin = value.speedMin;
                    this.setting.speedMax = value.speedMax;

                    if (!isEmptyString(this.setting.model)) {
                        this.handleModelSelection(this.setting.model);
                    }
                }
            }

        },
        beforeDestroy() {
            console.log("LabIndex before destroy");
            // this.$store.commit('bSerialPort/CLOSE');
            if (this.timer != null) {
                clearInterval(this.timer);
                this.timer = null;
            }
        },
        methods: {

            currentTimeChange() {
              this.currentTime = dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss');
              if (this.running) {
                if (this.percentage >= 100) {
                  this.percentage = 0;
                }
                this.percentage = this.percentage + 10;
              } else {
                this.percentage = 0;
              }
            },
            async asyncInit() {
                let serialData = await getSerialDevice(1);
                await this.$store.commit('bSerialPort/RE_INIT_PORT', {deviceName: serialData.name, baudRate: 9600});

                let modelData = await getModel(1);
                this.setting.model = modelData.name;
                if (!isEmptyString(this.setting.model)) {
                    this.handleModelSelection(this.setting.model);
                }
                delay(100);
                this.readSetting();
                delay(100);
                this.readDeviceUUID();

                if (this.timer != null) {
                    clearInterval(this.timer);
                    this.timer = null;
                }
                this.timer = setInterval(this.currentTimeChange, 1000)
            },
            async asyncIp() {
              // let that = this;
              // axios.get('http://api.ipify.org').then(res => {
              //   if (res.data) {
              //     that.ip = res.data;
              //   }
              // }).catch(() => {
              //
              // });
            },
            reportData() {
               if (!isEmptyString(this.ip)) {
                 axios.get('https://www.smartdevice.plus/oil/api/report/data' + "?topic=openDevice" + "&ip="+ this.ip + "&uuid=" + this.uuid + "&model=" +this.setting.model);
               }
            },
            handleModelSelection(val) {
                const key = 'lab.spindleOptions.' + val;
                this.setting.spindleOptions = this.$i18n.tc(key);
                const speedScopeKey = 'lab.speedOptions.' + val;
                const speedScope =  this.$i18n.tc(speedScopeKey);
                console.info(speedScope);
                this.setting.speedMin = speedScope[0];
                this.setting.speedMax = speedScope[1];

                if (isSpeedSelective(val)) {
                  this.setting.showSpeedSelective = true;
                  this.setting.speedOptions = getSpeedOptions(val);
                  this.setting.rpm = this.setting.speedOptions[0]["value"];
                } else {
                  this.setting.showSpeedSelective = false;
                  this.setting.speedOptions = [];
                }

                const stockKey = this.$store.state.user.name + "_" + this.setting.model ;
                const valueStr = localStorage.getItem(stockKey);
                if (!isEmptyString(valueStr)) {
                    let value = JSON.parse(valueStr);
                    this.setting.sampleName = value.sampleName;
                    this.setting.spindle = value.spindle;
                    this.setting.rpm = value.rpm;
                    this.setting.timeGap = value.timeGap;
                    this.setting.measureTime = value.measureTime;
                    this.setting.operator = value.operator;
                }
            },
            findModel(){
                let sendValue = toSendValue("82", "6100", [{value: 2, length: 4}]);
                if (this.$store.state.bSerialPort.serialPort === null ) {
                    this.$store.commit('bSerialPort/RE_INIT_PORT', {deviceName: this.$store.state.bSerialPort.deviceName, baudRate: 9600})
                }
                console.info(sendValue);
                this.$store.commit('bSerialPort/SEND_DATA', {value: sendValue, type: 3, action: 'findAction'});
            },
            readSetting(){
                let sendValue = toSendValue("82", "6100", [{value: 2, length: 4}]);
                if (this.$store.state.bSerialPort.serialPort === null ) {
                    this.$store.commit('bSerialPort/RE_INIT_PORT', {deviceName: this.$store.state.bSerialPort.deviceName, baudRate: 9600})
                }
                console.info(sendValue);
                this.$store.commit('bSerialPort/SEND_DATA', {value: sendValue, type: 3, action: 'findAction'});
            },
            readDeviceUUID() {
              let sendValue = toSendValue("82", "6500", [{value: 2, length: 4}]);
              if (this.$store.state.bSerialPort.serialPort === null ) {
                this.$store.commit('bSerialPort/RE_INIT_PORT', {deviceName: this.$store.state.bSerialPort.deviceName, baudRate: 9600})
              }
              console.info(sendValue);
              this.$store.commit('bSerialPort/SEND_DATA', {value: sendValue, type: 3, action: 'findAction'});
            },
            sendSettingData() {
                if (isEmptyString(this.setting.spindle) ||
                        isEmptyString(this.setting.rpm) ||
                        isEmptyString(this.setting.timeGap)  ||
                        isEmptyString(this.setting.measureTime) ||
                        isEmptyString(this.setting.model) ||
                        isEmptyString(this.setting.sampleName) ||
                        isEmptyString(this.setting.operator)
                ) {
                    Message.error({
                        message: this.$i18n.tc("lab.checkinfoError"),
                        showClose: true
                    });
                    return;
                }
                let sendValue = toSendValue("82", "5200", [{value: this.setting.spindle, length: 4}, {value: this.setting.rpm * 10, length: 4}, {value: this.setting.timeGap, length: 4}, {value: this.setting.measureTime, length: 4}]);
                if (this.$store.state.bSerialPort.serialPort === null ) {
                    this.$store.commit('bSerialPort/RE_INIT_PORT', {deviceName: this.$store.state.bSerialPort.deviceName, baudRate: 9600})
                }
                console.info(sendValue);
                this.$store.commit('bSerialPort/SEND_DATA', {value: sendValue, type: 3, action: 'data'});
                //save settingData
                const latestKey = this.$store.state.user.name;
                const key = this.$store.state.user.name + "_" + this.setting.model ;
                localStorage.setItem(latestKey, key);
                let saveData = {
                    model: this.setting.model,
                    sampleName: this.setting.sampleName,
                    spindle: this.setting.spindle,
                    rpm: this.setting.rpm,
                    timeGap:  this.setting.timeGap,
                    measureTime:  this.setting.measureTime,
                    operator:  this.setting.operator,
                    speedMin:  this.setting.speedMin,
                    speedMax:  this.setting.speedMax,
                };
                localStorage.setItem(key, JSON.stringify(saveData))
            },
            stopOp(){
                let sendValue = toSendValue("82", "6100", [{value: 0, length: 4}]);
                if (this.$store.state.bSerialPort.serialPort === null ) {
                    this.$store.commit('bSerialPort/RE_INIT_PORT', {deviceName: this.$store.state.bSerialPort.deviceName, baudRate: 9600})
                }
                console.info(sendValue);
                this.$store.commit('bSerialPort/SEND_DATA', {value: sendValue, type: 3, action: 'stop'});
                this.running = false;
            },
            startOp(){
                this.sendSettingData();

                if (isEmptyString(this.setting.spindle) ||
                    isEmptyString(this.setting.rpm) ||
                    isEmptyString(this.setting.timeGap)  ||
                    isEmptyString(this.setting.measureTime) ||
                    isEmptyString(this.setting.model) ||
                    isEmptyString(this.setting.sampleName) ||
                    isEmptyString(this.setting.operator)
                ) {
                    Message.error({
                        message: this.$i18n.tc("lab.checkinfoError"),
                        showClose: true
                    });
                    return;
                }
                let sendValue = toSendValue("82", "6100", [{value: 1, length: 4}]);
                if (this.$store.state.bSerialPort.serialPort === null ) {
                    this.$store.commit('bSerialPort/RE_INIT_PORT', {deviceName: this.$store.state.bSerialPort.deviceName, baudRate: 9600})
                }
                console.info(sendValue);
                this.$store.commit('bSerialPort/SEND_DATA', {value: sendValue, type: 3, action: 'start'});
                this.running = true;

            },
            async saveOp(){
                if (this.$store.state.bSerialPort.status) {
                    Message.warning({
                        message: this.$i18n.tc("lab.dataCannotSave"),
                        showClose: true
                    });
                    return;
                }
                await addMeasureData(
                    {
                        "sample": this.setting.sampleName,
                        "username": this.setting.operator,
                        "setting": this.setting,
                        "receiving": {
                            "niandu" : this.$store.state.bSerialPort.niandu,
                            "yunDongNianDu" : this.$store.state.bSerialPort.niandu * this.setting.density,
                            "temperture" :this.$store.state.bSerialPort.temperture,
                            "rpm" :   this.setting.rpm,
                            "spindle" : this.setting.spindle,
                            "ratio" :this.$store.state.bSerialPort.ratio,
                            "ss" :this.$store.state.bSerialPort.ss,
                            "sr" :this.$store.state.bSerialPort.sr,
                            "m1" :this.$store.state.bSerialPort.m1,
                            "m2" :this.$store.state.bSerialPort.m2,
                            "m3" :this.$store.state.bSerialPort.m3
                        },
                        "data": this.$store.state.bSerialPort.totalSeries,
                        "createTime": new Date().getTime(),
                        "result": this.$store.state.bSerialPort.naindu,
                        "createOn": this.$store.state.user.id
                    }
                );
                Message.success({
                    message : this.$i18n.tc('lab.dataSave'),
                    showClose: true
                });
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
            timeFormatter(row) {
                return formatMMSS(row.time);
            },
            async exportExcel() {
                let pageSize = this.pageSize;
                let pageNo = this.currentPage;
                this.currentPage = 1;
                this.pageSize = this.tableData.length;
                this.$nextTick(function () {
                    let ws1 = XLSX.utils.table_to_book(document.querySelector('#out-table'));//对应要导出的表格id

                    /* get binary string as output */
                    let wbOut = XLSX.write(ws1, {
                        bookType: "xlsx",
                        bookSST: true,
                        type: "array"
                    });
                    try {
                        FileSaver.saveAs(
                            new Blob([wbOut], { type: "application/octet-stream"}),
                            "Viscometer-" + dayjs(). format("YYYYMMDDHHmms") + ".xlsx"
                        );
                    } catch (e) {
                        if (typeof console !== "undefined") console.log(e, wbOut);
                    }
                    this.pageSize = pageSize; //表格还原
                    this.currentPage = pageNo;
                    return wbOut;
                });

            },
          clientWidth() {
            Message.info({
              message: "宽度 " + document.documentElement.clientWidth + " 高度 " + document.documentElement.clientHeight,
              showClose: true
            });
          },
        }
    }
</script>

<style lang="scss" scoped>
    .dashboard {
        &-container {
          margin: 10px;

          .sci-button {
            /* 基础样式 */
            width: 100%;
            height: 60px;
            border: none;
            border-radius: 12px;
            position: relative;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-family: 'Segoe UI', sans-serif;
            font-weight: 700;
            letter-spacing: 1px;

            /* 图标样式 */
            ::v-deep .el-icon {
              font-size: 24px;
              margin-right: 12px;
              filter: drop-shadow(0 0 4px currentColor);
            }

            /* 通用悬停效果 */
            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 8px 25px -5px currentColor;
            }

            /* 禁用状态 */
            &[disabled] {
              opacity: 0.6;
              filter: grayscale(0.8);
            }
          }

          .sci-start {
            background: linear-gradient(135deg, #00ff88 0%, #00b4d8 100%);
            color: #003049;
            --glow-color: 0,255,136;

            .button-glow {
              position: absolute;
              /* 修正定位和尺寸 */
              width: 150%;
              height: 150%;
              top: 0;
              left: 0;
              background: radial-gradient(
                      circle at 50% 50%,
                      rgba(0,255,136,0.6) 0%,
                      transparent 70%
              );

              animation: pulse-glow 2s infinite;
              /* 添加混合模式增强效果 */
              mix-blend-mode: screen;
              pointer-events: none; /* 防止遮挡点击 */
            }
          }

          .sci-stop {
            background: linear-gradient(135deg, #ff006e 0%, #ff4d6d 100%);
            color: #fff;
            border: 2px solid #ff4d6d;

            //&:active {
            //  animation: emergency-pulse 0.5s;
            //}
          }

          .sci-save {
            background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
            color: #fff;
            //
            //&::after {
            //  content: "";
            //  position: absolute;
            //  top: -50%;
            //  left: -50%;
            //  width: 200%;
            //  height: 200%;
            //  background: conic-gradient(
            //          transparent 135deg,
            //          #4cc9f0 180deg,
            //          transparent 225deg
            //  );
            //  animation: rotate-border 3s linear infinite;
            //}
          }

          /* 动画定义 */
          @keyframes pulse-glow {
            0% {
              opacity: 0.8;
              transform: scale(0.95);
            }
            50% {
              opacity: 0.4;
              transform: scale(1.15);
            }
            100% {
              opacity: 0.8;
              transform: scale(0.95);
            }
          }

          @keyframes emergency-pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
          }

          @keyframes rotate-border {
            to { transform: rotate(360deg); }
          }

          /* 文字特效 */
          .neon-text {
            text-shadow: 0 0 8px rgba(255,0,110,0.8);
          }

          .glowing-text {
            animation: text-glow 1.5s ease-in-out infinite alternate;
          }

          @keyframes text-glow {
            from { text-shadow: 0 0 5px #4361ee; }
            to { text-shadow: 0 0 15px #3a0ca3; }
          }

          /* 确认框样式 */
          ::v-deep .sci-confirm {
            background: #001523;
            border: 1px solid #00b4d8;
            box-shadow: 0 0 30px rgba(0,180,216,0.3);

            .el-message-box__title {
              color: #00ff88;
            }
          }
        }
    }
</style>
